<div class="layui-fluid" id="VIEW-index" lay-title="客户信息页">
	<div class="nepadmin-pad-tb20">
		<h1 class="nepadmin-lead clientName"></h1>
		<div class="nepadmin-ignore nepadmin-pad-tb10">
			<!-- <p>简单描述，可去掉</p> -->
		</div>
	</div>
	<div class="layui-row layui-col-space15 nepadmin-pad10">
		<div class="layui-col-lg8" style="background-color:#fff;">
			<div class="layui-row flex-row">
				<div class="layui-col-lg10 padding-top-xs">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>时间线：信息记录</legend>
					</fieldset>
				</div>
				<div class="layui-col-lg2 margin-left-auto">
					<div class="margin-xs0" style="margin-top: 30px;text-align: center;"><div class="addClickLink" data-cid='' data-iskernel=""><i class="layui-icon layui-icon-edit nepadmin-c-blue">添加</i></div>
					</div>
				</div>
			</div>
			<ul class="layui-timeline ">
			</ul>
		</div>
		<div class="layui-col-lg4 margin-left-xs0">
			<div class="layui-card">
				<div class="layui-card-header">
					<div>基本信息</div>
					<a style="position:absolute;top: 5px; right:15px;" class="editNowClientBtn" data-id=""><i class="layui-icon layui-icon-edit"></i></a>
				</div>
				<div class="layui-card-body clientInfoBlock">
					<table class="layui-table">
						<colgroup>
							<col width="150" />
							<col />
						</colgroup>
						<tbody>
							<tr>
								<td>姓名</td>
								<td class="name"></td>
							</tr>
							<tr>
								<td>电话</td>
								<td class="mobile">
									12345678910
								</td>
							</tr>
							<tr>
								<td>地址</td>
								<td class="address"></td>
							</tr>
							<tr>
								<td>种植面积</td>
								<td class="area"></td>
							</tr>
							<tr>
								<td>种植品种</td>
								<td class="variety"></td>
							</tr>
							<tr>
								<td>棚架架式</td>
								<td class="shack_type"></td>
							</tr>
							<tr>
								<td>垄宽</td>
								<td class="ridge_width"></td>
							</tr>
							<tr>
								<td>种植土壤条件</td>
								<td class="soil_condition"></td>
							</tr>
							<tr>
								<td>园区历史问题</td>
								<td class="remark"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script>
		var timer = setInterval(function() {
			if ($('.navInfoClick').length > 0 ) {
				getTimeLine($('.navInfoClick').eq(0).data('id'));
				getClientInfo($('.navInfoClick').eq(0).data('id'));
				clearInterval(timer)
			}
		}, 50)
		$(document).on('click','.navInfoClick',function(){
			if(window.location.hash.substr(1,11) == '/user/index'){
				var clientId = $(this).data('id');
				getTimeLine(clientId)
				getClientInfo(clientId);
			}
		})
		
		// 点击添加
		$(document).on('click','.addClickLink',function(){
			window.localStorage.setItem('addCustomersInfo','{"cid":"' + $(this)[0].dataset.cid + '","reload":true}')
			layui.use('admin',function(admin) {
				admin.navigate('/user/add');
			})
		})
		
		// 点击修改
		$(document).on('click','.editClickLink',function(){
			window.localStorage.setItem('addCustomersInfo','{"cid":"' + $(this)[0].dataset.cid + '","id":"' + $(this)[0].dataset.id + '","reload":true}')
			layui.use('admin',function(admin) {
				admin.navigate('/user/add');
			})
		})
		// 点击查看
		$(document).on('click','.showClickLink',function(){
			window.localStorage.setItem('addCustomersInfo','{"id":"' + $(this)[0].dataset.id + '"}')
			layui.use('admin',function(admin) {
				admin.navigate('/user/details');
			})
		})
		
		// 点击删除
		$(document).on('click','.deleteClickLink',function(){
			var deleteId = $(this)[0].dataset.id;
			var deleteThis = $(this)
			layer.confirm('确定要删除这一条数据吗', function(index){
			  
			  //向服务端发送删除指令
			  $.ajax({
			      url: apiUrl + '/index.php/agricultural/guide/delData?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
			      data:{
			  		id:deleteId
			  	},
			  	type: 'POST',
			      success:function(res){
			  		console.log(res)
			  		if(res.code == 0){
			  			layer.msg(res.msg)
						deleteThis.parent().parent().parent().remove();
			  		}else if(res.code == 2){
			  			tokenExpired()
			  		}else{
			  			layer.msg(res.msg)
			  		}
			          
			      },
			      complete:function(){
			          //loading.hide();
			      }
			  });
			});
			
		})
		
		// 获取时间线信息
		function getTimeLine(clientId){
			$.ajax({
				url: apiUrl + '/index.php/agricultural/Userindex/index?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
				data: {
					id: clientId
				},
				type: 'POST',
				success: function(res) {
					console.log(res)
					if (res.code == 0) {
						var indexTimeHtml = '';
						$.each(res.data,function(y,yearData){
							indexTimeHtml += '<li class="layui-timeline-item"><i class="layui-icon layui-icon-fire layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">' + y + '年，信息记录</div>';
							if(yearData.length > 0){
								indexTimeHtml += '<ul class="layui-timeline">';
								$.each(yearData,function(d,dateData){
									indexTimeHtml += '<li class="layui-timeline-item">' +
														'<i class="layui-icon layui-timeline-axis"></i>' +
														'<div class="layui-timeline-content layui-text">' +
															'<h3 class="layui-timeline-title">' + dateData.guide_time.substring(5,7) + '月' + dateData.guide_time.substring(8,10) + '日</h3>' +
															'<p>' + dateData.sapling_desc +
																'<br><a class="nepadmin-c-blue nepadmin-font-12 showClickLink" data-id="' + dateData.id + '">查看更多</a>&nbsp;&nbsp;&nbsp;&nbsp;' +
																'<a class="nepadmin-c-blue nepadmin-font-12 editClickLink" data-cid="" data-id="' + dateData.id + '">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;' +
																'<a class="nepadmin-c-blue nepadmin-font-12 deleteClickLink" data-id="' + dateData.id + '">删除</a>&nbsp;&nbsp;&nbsp;&nbsp;' +
															'</p>' +
														'</div>' + 
													'</li>';
								})
								indexTimeHtml += '</ul>';
							}
							indexTimeHtml += '</li>';
						})
						$('.layui-timeline').html(indexTimeHtml);
						$('.editClickLink').attr('data-cid',clientId)
						$('.addClickLink').attr('data-cid',clientId)
					} else if (res.code == 2) {
						tokenExpired()
					} else {
						if(res.msg == '没有用户信息或者录入信息缺失'){
							$('.layui-timeline').html('<div class="noRole"><img src="./nepadmin/images/noRole.svg"/><p>没有用户信息或者录入信息缺失</p></div>');
						}
						layer.msg(res.msg)
					}
			
				},
				complete: function() {
					//loading.hide();
				}
			});
		}
		
		function getClientInfo(clientId){
			$.ajax({
				url: apiUrl + '/index.php/agricultural/user/index?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
				data: {
					id: clientId
				},
				type: 'POST',
				success: function(res) {
					console.log(res)
					if (res.code == 0) {
						$.each(res.data[0],function(k,v){
							$('.clientInfoBlock .' + k).text(v)
						})
						$('.clientName').html(res.data[0].name)
						$('.editNowClientBtn').attr('data-id',res.data[0].id)
						$('.editNowClientBtn').attr('data-iskernel',res.data[0].is_kernel)
					} else if (res.code == 2) {
						tokenExpired()
					} else {
						layer.msg(res.msg)
					}
			
				},
				complete: function() {
					//loading.hide();
				}
			});
		}
		
		layui.use('form',function(form) {
			$('.editNowClientBtn').click(function(){
				var block = $(this).parent().parent()
				$('#addClientFixed input[name=id]').val($(this)[0].dataset.id)
				$('#addClientFixed input[name=name]').val(block.find('.name').text())
				$('#addClientFixed input[name=mobile]').val(block.find('.mobile').text())
				$('#addClientFixed input[name=address]').val(block.find('.address').text())
				$('#addClientFixed input[name=variety]').val(block.find('.variety').text())
				$('#addClientFixed input[name=area]').val(block.find('.area').text())
				$('#addClientFixed input[name=shack_type]').val(block.find('.shack_type').text())
				$('#addClientFixed input[name=ridge_width]').val(block.find('.ridge_width').text())
				$('#addClientFixed input[name=soil_condition]').val(block.find('.soil_condition').text())
				$('#addClientFixed input[name=remark]').val(block.find('.remark').text())
				$('#addClientFixed select[name=is_kernel]').val($(this)[0].dataset.iskernel)
				form.render()
				var width = isMobile() ? '90%' : '1000px'
				layer.open({
					type: 1,
					title: '修改用户信息',
					area: width,
					content: $('#addClientFixed') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				});
			})
			
			form.on('submit(addClientForm)', function (data) {
				console.log(data.field);
				if(window.location.hash == '#/user/index'){
					// 修改
					$.ajax({
						url: apiUrl + '/index.php/agricultural/user/updateData?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
						data:data.field,
						type: 'POST',
						success:function(res){
							// console.log(res)
							if(res.code == 0){
								layer.closeAll();
								layer.msg('修改成功')
								$('#editUserFixed').hide();
								getNavHtml();
								getClientInfo(data.field.id)
							}else if(res.code == 2){
								tokenExpired()
							}else{
								layer.msg(res.msg)
							}
							
						},
						complete:function(){
							//loading.hide();
						}
					});
				}					
				return false;
			});
		})
		
		
	</script>
	<style>
		.layui-col-space15>* {
			padding: 0 7.5px 7.5px 7.5px;
		}

		.layui-text ul li {
			margin-top: 5px;
			list-style: none;
		}

		#addClientFixed {
			overflow: hidden;
			margin: 10px;
		}

		#addClientFixed .layui-form-label {
			width: 115px;
		}

		#addClientFixed .layui-input-block {
			margin-left: 145px;
		}

		#addClientFixed .rightBlock .layui-form-label {
			width: 60px;
		}

		#addClientFixed .rightBlock .layui-input-block {
			margin-left: 100px;
		}

		#addClientFixed .formColItem {
			margin-bottom: 20px;
		}
		@media screen and (max-width: 768px) {
			.flex-row{
				display: flex;
				padding: 20px 0 10px;
				border-bottom: 1px solid #e6e6e6;
				margin-bottom: 10px;
			}
			.padding-top-xs{
				padding: 0;
			}
			.padding-top-xs fieldset{
				margin: 0 !important;
			}
			.padding-top-xs legend{
				padding: 0;
				margin: 0;
			}
			.margin-xs0{
				margin-top: 0 !important;
			}
			.margin-left-auto{
				margin-left: auto;
			}
			.margin-left-xs0{
				margin: 20px 0;
				padding: 0;
			}
		}
	</style>
